<style lang="scss" scoped>
.addressCheck {
    .close-btn {
        position: absolute;
        right: 0;
        top: 0;
        padding: pxTorem(13px);
        width: pxTorem(42px);
        height: pxTorem(42px);
        img {
            width: pxTorem(16px);
            height: pxTorem(16px);
        }
    }
    .addressTit {
        width: 100%;
        height: pxTorem(52px);
        font-size: pxTorem(16px);
        line-height: pxTorem(52px);
        color: #333333;
        text-align: center;
        border-bottom: 1px solid #e5e5e5;
    }
    .addressList {
        width: 100%;
        max-height: pxTorem(350px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        ul {
            padding-left: pxTorem(15px);
            li {
                width: 100%;
                height: pxTorem(62px);
                padding-right: pxTorem(15px);
                border-bottom: 1px solid #e5e5e5;
                display: -webkit-flex;
                display: flex;
                -webkit-justify-content: space-between;
                justify-content: space-between;
                -webkit-align-items: center;
                align-items: center;
                .addressInfo {
                    -webkit-flex: 0 0 pxTorem(290px);
                    flex: 0 0 pxTorem(290px);
                    p {
                        width: pxTorem(290px);
                        margin-bottom: pxTorem(6px);
                        font-size: pxTorem(13px);
                        // line-height: pxTorem(13px);
                        color: #333333;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
                .defaultIcon {
                    width: pxTorem(6px);
                    height: pxTorem(12px);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .addAddress {
            height: pxTorem(63px);
            padding: 0 pxTorem(15px);
            font-size: pxTorem(13px);
            line-height: pxTorem(17px);
            color: #ee0000;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-align-items: center;
            align-items: center;
            img {
                width: pxTorem(6px);
                height: pxTorem(12px);
            }
        }
    }
}
</style>

<template>
    <div class="addressCheck">
        <slideUpBox :show="addressShow" @changeBoxShow="changeBoxShow()">
            <div class="close-btn" @click.stop="changeBoxShow(false)">
                <img src="@/assets/images/common/icon_close@2x.png" alt>
            </div>
            <div class="addressTit">选择收货地址</div>
            <div class="addressList">
                <ul>
                    <li
                        v-for="(item, index) in addressData"
                        :key="index"
                        @click.stop="checkAddress(item.addressId)"
                    >
                        <div class="addressInfo">
                            <p>{{item.consignee}} {{item.mobile}}</p>
                            <p>{{item.provinceText + item.cityText + item.districtText + item.address}}</p>
                        </div>
                        <div class="defaultIcon">
                            <!--  v-if="addressId == item.addressId" -->
                            <img src="@/assets/images/common/icon_more@2x.png" alt>
                        </div>
                    </li>
                </ul>
                <div class="addAddress" @click.stop="newAddress()">
                    添加新收获地址
                    <img src="@/assets/images/common/icon_more@2x.png" alt>
                </div>
            </div>
        </slideUpBox>
        <newAddress @postNewAddr="postNewAddr" :newAddrShow="newAddrShow"></newAddress>
        <msgBox :msgTxt="msgTxt"></msgBox>
    </div>
</template>


<script>
import { _getUserInfo } from "@/assets/js/common/utils.js";
// import { mapGetters, mapMutations } from 'vuex';
import slideUpBox from "@/components/slideUpBox";
import newAddress from "@/components/newAddress";
import msgBox from "@/components/msgBox";
import { getAddressList, editAddress } from "@/page/tenFair/assets/js/api.js";
export default {
    name: "addressCheck",
    components: {
        slideUpBox,
        newAddress,
        msgBox
    },
    data() {
        return {
            // img_url: this.$global.img_url,
            addressId: "",
            addressData: [],
            newAddrShow: false,
            msgTxt: ""
        };
    },
    props: {
        data: {
            type: Array,
            default: []
        },
        addressShow: {
            type: Boolean,
            default: false
        },
        setDefault: {
            type: Boolean,
            default: true
        }
    },
    watch: {
        // 'data'(){
        //     this.$forceUpdate();
        // },
        addressShow() {
            if (this.addressShow && this.addressData.length < 1) {
                this.getData();
                this.$forceUpdate();
            }
        }
    },
    created() {
        if (_getUserInfo().user_id) {
            // this.getData();
        }
    },
    computed: {
        // 使用对象展开运算符将 getter 混入 computed 对象中
        // ...mapGetters([
        //     'msgTxt',
        //     'addressShow',
        // ])
    },
    methods: {
        // ...mapMutations([
        //     'setMsgTxt',
        //     'setAddressShow',
        //     'setNewAddrShow',
        // ]),
        // 获取地址列表
        getData(fn) {
            let self = this;
            this.$http.get(getAddressList, {}).then(
                res => {
                    if (res.data && res.data.result == 1) {
                        self.addressData = res.data["data"];
                        self.defaultAddr = self.addressData.filter(function(
                            item,
                            index
                        ) {
                            return item.default == 1;
                        });
                        // this.addressId=this.defaultAddr["addressId"];
                        this.$emit("returnAddressId", {
                            addressId: self.defaultAddr[0]
                                ? self.defaultAddr[0]["addressId"]
                                : 0
                        });
                        // this.cartData=[...this.cartData]
                        typeof fn == "function" ? fn() : "";
                    } else {
                        console.log("地址请求失败");
                        this.msgTxt =
                            res.data && res.data.message
                                ? res.data.message
                                : "地址请求失败";
                    }
                    // this.setCartData();
                },
                err => {}
            );
        },
        // 修改收货地址
        editAddress(params, fn) {
            this.$http.get(editAddress, { params }).then(res => {
                console.log(res);
                let data = res.data || {};
                if (data.result == 1) {
                    console.log("chenggong");
                    typeof fn == "function" ? fn() : "";
                } else {
                    console.log(123);
                    this.msgTxt =
                        data && data.message ? data.message : "选择地址失败";
                }
            });
        },
        changeBoxShow(bool) {
            // this.setAddressShow(bool);
            this.$parent.addressShow = bool;
        },
        // // sku确定
        // skuSubmit(){
        //     for(let i=0; i<this.checkedSkus.length;i++){
        //         console.log(this.checkedSkus)
        //         if(this.checkedSkus[i] == undefined || this.checkedSkus[i] == null){
        //             this.setMsgTxt(this.LackSku);
        //             break;
        //         }
        //     }
        // },
        // 选择收货地址
        checkAddress(id) {
            this.addressId = id;
            let addr = this.addressData.filter(item => item.addressId == id)[0];
            // if(!this.setDefault){
            //     this.$emit("submitAddress", {
            // 		id: id,
            // 		addrTxt:
            // 			addr.consignee +
            // 			"，" +
            // 			addr.mobile +
            // 			"，" +
            // 			addr.provinceText +
            // 			addr.cityText +
            // 			addr.districtText +
            // 			addr.address
            // 	});
            //     return;
            // }
            this.$emit("submitAddress", {
                id: id,
                addrTxt:
                    addr.consignee +
                    "，" +
                    addr.mobile +
                    "，" +
                    addr.provinceText +
                    addr.cityText +
                    addr.districtText +
                    addr.address
            });
            return;
            // let params = {
            // 	consignee: addr.consignee,
            // 	country: 1,
            // 	province: addr.province,
            // 	city: addr.city,
            // 	district: addr.district,
            // 	address: addr.address,
            // 	mobile: addr.mobile,
            // 	address_id: id,
            // 	default: 1
            // };
            // this.editAddress(params, () => {
            // 	this.$emit("submitAddress", {
            // 		id: id,
            // 		addrTxt:
            // 			addr.consignee +
            // 			"，" +
            // 			addr.mobile +
            // 			"，" +
            // 			addr.provinceText +
            // 			addr.cityText +
            // 			addr.districtText +
            // 			addr.address
            // 	});
            // });
        },
        // 新增收货地址
        newAddress() {
            // this.setAddressShow(false);
            // this.setNewAddrShow(true);
            this.$parent.addressShow = false;
            this.newAddrShow = true;
        },
        // 接受新增地址信息
        postNewAddr(obj) {
            // this.setNewAddrShow(false);
            this.getData();
            this.newAddrShow = false;
            this.$emit("submitAddress", { id: obj.id, addrTxt: obj.addrTxt });
        }
    }
};
</script>